<template>
  <div>
    <div class="main">
      <div class="topTitle">
        <div class="title">我的订单</div>
      </div>
      <div class="myOrder" v-for="(item,index) in OData" :key="index">
        <div class="pic">
          <img :src="item.pic[0]" alt />
        </div>
        <div class="name">
          <h4>{{item.name}}</h4>
        </div>
        <div class="total">
          <h4>总计：{{Math.floor(item.price*item.num*1000)/1000}}K</h4>
        </div>
        <div class="state2">已支付</div>
        <div class="operation">
          <button type="button" class="btn btn-success" @click="sawOrder(item)">查看订单</button>
          <button type="button" class="btn btn-danger" @click="Operation(item,index)">删除订单</button>
        </div>
      </div>
      <template v-if="show">
        <div class="pay">
          <div class="part1">
            <img :src="this.pic" alt />
          </div>
          <div class="part2">
            <button type="button" class="btn btn-secondary" style="margin-left:530px" @click="noShow">X</button>
            <ul>
              <li>{{this.ProductName}}</li>
              <li>用户：{{this.$store.state.userInfo.username}}</li>
              <li>地址：{{this.$store.state.userInfo.local}}</li>
              <li>已付款：{{this.price}}K</li>
            </ul>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      OData: [],
      show: false,
      pic:'',
      ProductName:'',
      price:0
    };
  },
  mounted() {
    let name = this.$route.query.name;
    if (name == "parts") {
      this.show1 = false;
    }
    this.OData = this.$store.state.PayData;
    console.log(this.$store.state.PayData);
  },
  methods: {
    Operation(item, index) {
      if (item.stateNum == 0) {
        this.show = true;
      } else {
        this.OData.splice(index, 1);
      }
    },
    sawOrder(item) {
      this.show = true;
      this.pic = item.pic[0]
      this.ProductName = item.name
      this.price = item.price
    },
    noShow() {
      this.show = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 90%;
  margin-top: 30px;
  .topTitle {
    width: 100%;
    height: 80px;
    display: flex;
    .title {
      width: 30%;
      height: 60px;
      margin: 10px 80px;
      font-size: 32px;
      font-weight: 600;
      color: #000000;
      border-bottom: 2px solid black;
    }
  }
  .myOrder {
    width: 100%;
    margin: 10px 80px;
    height: 160px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: #000000 1px solid;
    .pic {
      width: 10%;
      height: 120px;
      img {
        width: 100%;
        height: 120px;
      }
    }
    .name {
      width: 20%;
      height: 70px;
      text-align: center;
    }
    .total {
      width: 15%;
      height: 70px;
      margin: 50px 30px;
    }
    .state1 {
      width: 10%;
      height: 70px;
      margin: 50px 30px;
      font-size: 26px;
      font-weight: 600;
      color: rgb(103, 8, 8);
    }
    .state2 {
      width: 10%;
      height: 70px;
      margin: 50px 30px;
      font-size: 26px;
      font-weight: 600;
      color: rgb(8, 103, 33);
    }
    .operation {
      width: 10%;
      height: 140px;
      button {
        width: 80%;
        margin: 10px;
      }
    }
  }
  .pay {
    width: 80%;
    height: 600px;
    margin: auto;
    position: absolute;
    top: 100px;
    left: 10%;
    background-color: #000000;
    opacity: 0.9;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    .part1 {
      width: 40%;
      height: 500px;
      margin: 40px;
      img {
        width: 100%;
        height: 500px;
        border-radius: 10px;
      }
    }
    .part2 {
      width: 40%;
      height: 500px;
      margin: 40px;
      ul {
        margin: 60px 0px;
        li {
          width: 90%;
          height: 50px;
          display: flex;
          margin-top: 60px;
          font-size: 28px;
          font-weight: 600;
          color: #ffffff;
          border-bottom: #ffffff 1px solid;
        }
      }
    }
  }
}
</style>
